<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery/jquery.form.js"></script>
    <script src="/js/vue/vue.min.js"></script>
</head>
<body>
<div id="app">
    <form method="get" id="formOne" enctype="multipart/form-data">
        <span id="spanceshi">考题类型：</span>
        <select id="selectType" name="type_id">
        <#list list as type>
            <option value="${type.type_id}">${type.type_name}</option>
        </#list>
        </select>
        <span>题库：</span>
        <select  id="selectLib" name="lib_id">
            <option value="" selected="selected">题库类型</option>
        <#list list1 as lib>
            <option value="${lib.lib_id}" class="p">${lib.lib_name}</option>
        </#list>
        </select>
        <span>知识点：</span>
        <select id="selectPoint" name="point_id">
            <option value="">知识点</option>
        </select>
        <div id="pp">
            题目图片:<input type="file" id="fileId" name="file">
            难度等级：<select id="singleGrade" name="grade">
            <option value="1">简单</option>
            <option value="2">复杂</option>
            <option value="3">困难</option>
        </select><br>
            <span> 题目：</span><textarea rows="2" cols="80" id="singleName" name="pro_name"></textarea>
        <#--判断-->
            <p id="judge">
                答案:<input type="radio" name="radio"  value="T">√<input type="radio" name="radio"  value="F">×<br>
            </p>
        <#--单选-->
            <p id="single" style="display: none" >选项：<br>
                A:<textarea rows="1" cols="30" id="singleA" name="pro_choiceA"></textarea><input type="file" id="fileIdA" name="file"><br>
                B:<textarea rows="1" cols="30" id="singleB" name="pro_choiceB"></textarea><input type="file" id="fileIdB" name="file"><br>
                C:<textarea rows="1" cols="30" id="singleC" name="pro_choiceC"></textarea><input type="file" id="fileIdC" name="file"><br>
                D:<textarea rows="1" cols="30" id="singleD" name="pro_choiceD"></textarea><input type="file" id="fileIdD" name="file"><br>
                答案:<select id="singleTrue" name="p_true">
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                </select><br>
            </p>
        <#--多选-->
            <p id="MultiSelect" style="display: none">选项：<br>
                A:<textarea rows="1" cols="30" id="MultiSelectA" name="pro_choiceA"></textarea>  <br>
                B:<textarea rows="1" cols="30" id="MultiSelectB" name="pro_choiceB"></textarea><br>
                C:<textarea rows="1" cols="30" id="MultiSelectC" name="pro_choiceC"></textarea><br>
                D:<textarea rows="1" cols="30" id="MultiSelectD" name="pro_choiceD"></textarea><br>
            <#--增加一列-->
                <input type="button" value="增加一列" id="add"><br>
                答案:<input type="checkbox" value="A" id="MultiSelectTrue" name="p_true">A
                <input type="checkbox" value="B" id="MultiSelectTrue" name="p_true">B
                <input type="checkbox" value="C" id="MultiSelectTrue" name="p_true">C
                <input type="checkbox" value="D" id="MultiSelectTrue" name="p_true">D
                <span id="MultiSelectTrueSpanE"></span>
            </p>
            答案解析：<textarea rows="2" cols="30" id="singleRes" name="true_res"></textarea><br>
            <input type="button" id="btnjudge" value="提交" style="display: block"><#--判断-->
            <input type="button" id="btnsingle" value="提交" style="display: none"><#--单选-->
            <input type="button" id="btnMultiSelect" value="提交" style="display: none"><#--多选-->
        </div>
    </form>
</div>
<script>
    //显示
    $("#selectType").click(function () {
        if($(this).val()==4){
            $("#MultiSelect").css("display","none");
            $("#single").css("display","block");
            $("#judge").css("display","none");
            $("#btnMultiSelect").css("display","none");
            $("#btnsingle").css("display","block");
            $("#btnjudge").css("display","none");

        }
        else if($(this).val()==2){
            $("#MultiSelect").css("display","none");
            $("#single").css("display","none");
            $("#judge").css("display","block");
            $("#btnMultiSelect").css("display","none");
            $("#btnsingle").css("display","none");
            $("#btnjudge").css("display","block");
        }
        else if($(this).val()==5){
            $("#MultiSelect").css("display","block");
            $("#single").css("display","none");
            $("#judge").css("display","none");
            $("#btnMultiSelect").css("display","block");
            $("#btnsingle").css("display","none");
            $("#btnjudge").css("display","none");
        }
    })
    //增加一列
    $("#add").click(function () {
        if($("#MultiSelect textarea").length==4){
            $("#MultiSelectD").after('<br id="brid">'+"<span id='spanE'>"+"E:"+"</span>"+'<textarea rows="'+1+'" cols="'+30+'" id="MultiSelectE" />');
            $("#MultiSelectTrueSpanE").append("<input type='checkbox' id='MultiSelectTrue' value='E'/>"+"<span id='spanE'>"+"E"+"</span>");
        }else if($("#MultiSelect textarea").length==5){
            $("#MultiSelectE").after('<br id="bri">'+"<span id='spanF'>"+"F:"+"</span>"+'<textarea rows="'+1+'" cols="'+30+'" id="MultiSelectF" />');
            $("#MultiSelectTrueSpanE #spanE").after("<input type='checkbox' id='MultiSelectTrue' value='F'/>"+"<span id='spanE'>"+"F"+"</span>");
        }else if($("#MultiSelect textarea").length>5){
            alert("只能添加两个选项");
        }
    });

    $("#selectLib").click(function () {
        $.ajax({
            type:'GET',
            dataType:'json',
            url:'/problem/point.do',
            data:{
                name:$(this).val()
            },
            success:function(result){
                $("#selectPoint").empty();
                for(var p in result){
                    $("#selectPoint").prepend("<option value="+result[p].point_id+">"+result[p].point_name+"</option>");
                }
            },
        });
    });
    //单选
    $("#btnsingle").click(function () {
        verify();
        var formdata=new FormData();
        formdata.append("pro_name",$("#singleName").val());
        formdata.append("pro_choiceA",$("#singleA").val());
        formdata.append("pro_choiceB",$("#singleB").val());
        formdata.append("pro_choiceC",$("#singleC").val());
        formdata.append("pro_choiceD",$("#singleD").val());
        formdata.append("type_id", $("#selectType").val());
        formdata.append("point_id", $("#selectPoint").val());
        formdata.append("teacher_id",2);
        formdata.append("lib_id",$("#selectLib").val());
        formdata.append("grade",$("#singleGrade").val());
        formdata.append("p_true", $("#singleTrue").val());
        formdata.append("true_res",$("#singleRes").val());
        formdata.append("true_hot",0);
        if(!($("#fileId").val()==""&&$("#fileIdA").val()==""&&$("#fileIdB").val()==""&&$("#fileIdC").val()==""&&$("#fileIdD").val()=="")) {
            for (var i = 0; i < $("input[name='file']").length; i++) {
                formdata.append("file", $("input[name='file']")[i].files[0]);
            }
        }
        $.ajax({
            type:'GET',
            cache:false,
            url:'/problem/single.do',
            data:formdata,
            processData:false,
            contentType:false,
            success:function () {
                $("#singleName").val(""),
                        $("#singleA").val(""),
                        $("#singleB").val(""),
                        $("#singleC").val(""),
                        $("#singleD").val(""),
                        $("#singleGrade").val(""),
                        $("#singleTrue").val(""),
                        $("#singleRes").val(""),
                        $("input[name='file']").val("")
            },
        })
    });
    //判断
    $("#btnjudge").click(function () {
        verify();
        var formdata=new FormData();
        formdata.append("pro_name",$("#singleName").val());
        formdata.append("pro_choiceT",'T');
        formdata.append("pro_choiceF","F");
        formdata.append("type_id", $("#selectType").val());
        formdata.append("point_id", $("#selectPoint").val());
        formdata.append("teacher_id",2);
        formdata.append("lib_id",$("#selectLib").val());
        formdata.append("grade",$("#singleGrade").val());
        formdata.append("p_true", $("input[name='radio']:checked").val());
        formdata.append("true_res",$("#singleRes").val());
        formdata.append("true_hot",0);
        if(!($("#fileId").val()=="")){
            formdata.append("file",$("#fileId")[0].files[0]);
        }
        $.ajax({
            type:'POST',
            cache:false,
            url:'/problem/judge.do ',
            data:formdata,
            processData:false,
            contentType:false,
            success:function () {
                $("#singleName").val(""),
                        $("#singleGrade").val(""),
                        $("input[type='radio']").removeAttr('checked'),
                        $("#singleRes").val(""),
                        $("input[name='file']").val("")
            }
        })
    });
    //多选题
    $("#btnMultiSelect").click(function () {
        verify();
        var name="";
        for(var i=0;i<$("#MultiSelect textarea").length;i++) {
            if ($("#MultiSelect #MultiSelectTrue").get(i).checked) {
                name+=$("input[type='checkbox']")[i].val();
            }
        }
        var formdata=new FormData();
        formdata.append("pro_name",$("#singleName").val());
        formdata.append("pro_choiceA",$("#MultiSelectA").val());
        formdata.append("pro_choiceB",$("#MultiSelectB").val());
        formdata.append("pro_choiceC",$("#MultiSelectC").val());
        formdata.append("pro_choiceD",$("#MultiSelectD").val());
        formdata.append("pro_choiceE",$("#MultiSelectE").val());
        formdata.append("pro_choiceF",$("#MultiSelectF").val());
        formdata.append("type_id", $("#selectType").val());
        formdata.append("point_id", $("#selectPoint").val());
        formdata.append("teacher_id",2);
        formdata.append("lib_id",$("#selectLib").val());
        formdata.append("grade",$("#singleGrade").val());
        formdata.append("p_true", name);
        formdata.append("true_res",$("#singleRes").val());
        formdata.append("true_hot",0);
        if(!($("#fileId").val()=="")){
            formdata.append("file",$("#fileId")[0].files[0]);
        }
        if($("#MultiSelect textarea").length==4){
            $.ajax({
                type:'POST',
                cache:false,
                url:'/problem/single.do',
                data:formdata,
                processData:false,
                contentType:false,
                success:function () {
                    $("#singleName").val(""),
                            $("#MultiSelectA").val(""),
                            $("#MultiSelectB").val(""),
                            $("#MultiSelectC").val(""),
                            $("#MultiSelectD").val(""),
                            $("#singleTrue").val(""),
                            $("#singleRes").val(""),
                            $("input[type='checkbox']").removeAttr('checked')
                },
            })
        }else if($("#MultiSelect textarea").length>4){
            $.ajax({
                type:'POST',
                cache:false,
                url:'/problem/multiSelect.do',
                data:formdata,
                processData:false,
                contentType:false,
                success:function () {
                    $("#singleName").val(""),
                            $("#MultiSelectA").val(""),
                            $("#MultiSelectB").val(""),
                            $("#MultiSelectC").val(""),
                            $("#MultiSelectD").val(""),
                            $("#singleTrue").val(""),
                            $("#singleRes").val(""),
                            $("input[type='checkbox']").removeAttr('checked'),
                            $("#spanE").remove(),
                            $("#spanF").remove(),
                            $("#MultiSelectE").remove(),
                            $("#MultiSelectF").remove(),
                            $("#MultiSelectTrueSpanE #MultiSelectTrue").remove(),
                            $("#MultiSelectTrueSpanE #spanE").remove(),
                            $("#brid").remove(),
                            $("#bri").remove()
                },
            });
        }
    });
    var verify=function () {
        if($("#selectLib").val()==""&&$("#selectPoint").val()==""){
            alert("请选择题库或知识点");
            return;
        }
    }
</script>
</body>
</html>